<template>
  <div class="main">
    <div class="shadow"></div>

    <div class="topbox">
      <div class="onebox twobox">
        <img src="../../../assets/image/mypayment/allpay.png" alt="" />
        <div class="text">广告金</div>
        <div class="num">48.5</div>
        <div class="button">充值</div>
      </div>

      <div class="twobox">
        <img src="../../../assets/image/mypayment/canpay.png" alt="" />
        <div class="text">总余额</div>
        <div class="num">48.5</div>
        <div>
          <div class="button">提现</div>
          <div class="buttonTow">余额转广告</div>
        </div>
      </div>
    </div>

    <div class="handlebox">
      <div class="inputbox">
        <span>交易单号</span>
        <el-input v-model="paycode" placeholder="请输入"></el-input>
      </div>

      <div class="datebox">
        <span>交易时间</span>
        <el-date-picker
          v-model="date"
          type="datetimerange"
          range-separator="至"
          start-placeholder="请选择"
          end-placeholder="请选择"
          align="right"
        >
        </el-date-picker>
      </div>

      <div class="selectbox">
        <span>交易类型</span>
        <el-select v-model="paytype" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>

      <div class="buttonbox">
        <div class="reset">
          <i class="el-icon-refresh"></i>
          <span>重置</span>
        </div>
        <div class="search">
          <i class="el-icon-search"></i>
          <span>搜索</span>
        </div>
      </div>
    </div>

    <div class="tablebox">
      <div class="table">
        <el-table
          :data="tableData"
          style="width: 100%; color: #999999"
          :header-cell-style="{ background: '#EBEFF5', color: '#000000' }"
        >
          <el-table-column prop="code" label="交易单号"></el-table-column>
          <el-table-column prop="type" label="交易类型"></el-table-column>
          <el-table-column prop="num" label="交易金额"></el-table-column>
          <el-table-column prop="prev" label="交易前余额"></el-table-column>
          <el-table-column prop="next" label="交易后余额"></el-table-column>
          <el-table-column prop="time" label="交易时间"></el-table-column>
          <!-- <el-table-column prop="date" label="操作">
            <template slot-scope="scope">
              <span style="color: #399ef1">详情</span>
            </template>
          </el-table-column> -->
        </el-table>
      </div>

      <div class="pagination">
        <el-pagination
          background
          style="font-size: 0.13rem"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  created() {},
  data() {
    return {
      paycode: "",
      paydate: "",
      paytype: "",
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      tableData: [
        {
          code: "DD1797985442948",
          type: "交易类型",
          num: "￥23",
          prev: "￥800",
          next: "￥823",
          time: "2023 - 11 - 24 09:44",
        },
        {
          code: "DD1797985442948",
          type: "交易类型",
          num: "￥23",
          prev: "￥800",
          next: "￥823",
          time: "2023 - 11 - 24 09:44",
        },
        {
          code: "DD1797985442948",
          type: "交易类型",
          num: "￥23",
          prev: "￥800",
          next: "￥823",
          time: "2023 - 11 - 24 09:44",
        },
        {
          code: "DD1797985442948",
          type: "交易类型",
          num: "￥23",
          prev: "￥800",
          next: "￥823",
          time: "2023 - 11 - 24 09:44",
        },
        {
          code: "DD1797985442948",
          type: "交易类型",
          num: "￥23",
          prev: "￥800",
          next: "￥823",
          time: "2023 - 11 - 24 09:44",
        },
        {
          code: "DD1797985442948",
          type: "交易类型",
          num: "￥23",
          prev: "￥800",
          next: "￥823",
          time: "2023 - 11 - 24 09:44",
        },
        {
          code: "DD1797985442948",
          type: "交易类型",
          num: "￥23",
          prev: "￥800",
          next: "￥823",
          time: "2023 - 11 - 24 09:44",
        },
        {
          code: "DD1797985442948",
          type: "交易类型",
          num: "￥23",
          prev: "￥800",
          next: "￥823",
          time: "2023 - 11 - 24 09:44",
        },
        {
          code: "DD1797985442948",
          type: "交易类型",
          num: "￥23",
          prev: "￥800",
          next: "￥823",
          time: "2023 - 11 - 24 09:44",
        },
        {
          code: "DD1797985442948",
          type: "交易类型",
          num: "￥23",
          prev: "￥800",
          next: "￥823",
          time: "2023 - 11 - 24 09:44",
        },
      ],
      currentPage: 1,
    };
  },
  methods: {},
};
</script>

<style scoped lang="scss">
.main {
  width: calc(100%);
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  background: #ffffff;
  .shadow {
    flex-shrink: 0;
    width: 100%;
    height: 0.2rem;
    // background: #F5F5F5;
    background: linear-gradient(0deg, #ffffff, #f5f5f5);
  }
  .topbox {
    padding-left: 0.2rem;
    width: calc(100% - 0.2rem);
    height: 1.82rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .onebox {
      width: 3.92rem;
      height: 1.82rem;
      border-radius: 0.1rem;
      position: relative;
      color: #000000;
      img {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
      }
      .text {
        font-size: 0.14rem;
        position: absolute;
        top: 0.45rem;
        left: 2.09rem;
      }
      .num {
        font-size: 0.36rem;
        position: absolute;
        top: 0.73rem;
        left: 1.96rem;
      }
    }
    .twobox {
      width: 3.92rem;
      height: 1.82rem;
      border-radius: 0.1rem;
      position: relative;
      color: #000000;
      img {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
      }
      .text {
        font-size: 0.14rem;
        position: absolute;
        top: 0.45rem;
        left: 2.09rem;
      }
      .num {
        font-size: 0.36rem;
        position: absolute;
        top: 0.73rem;
        left: 1.96rem;
      }
      .button {
        width: 0.96rem;
        height: 0.32rem;
        line-height: 0.32rem;
        text-align: center;
        font-size: 0.16rem;
        border-radius: 0.4rem;
        background: #ffffff;
        position: absolute;
        top: 0.81rem;
        left: 2.82rem;
        cursor:pointer;
      }
      .buttonTow {
        width: 1.1rem;
        height: 0.32rem;
        line-height: 0.32rem;
        text-align: center;
        font-size: 0.16rem;
        border-radius: 0.4rem;
        background: #ffffff;
        position: absolute;
        top: 1.21rem;
        left: 2.75rem;
        cursor:pointer;
      }
    }
  }
  .handlebox {
    margin: 0.2rem auto 0 0.2rem;
    padding: 0rem 0.2rem;
   
    width: 96%;
    height: 0.86rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.14rem;
    color: #000000;
    border: 0.01rem solid #e8e8e8;
    .inputbox {
      width: 3.8rem;
      height: 0.42rem;
      background: #f5f7f9;
      display: flex;
      align-items: center;
      span {
        margin: 0rem 0.1rem 0 0.2rem;
      }
      .el-input {
        flex: 1;
      }
      ::v-deep .el-input__inner {
        background: none !important;
        border: none !important;
      }
    }
    .datebox {
      width: 4.2rem;
      height: 0.42rem;
      background: #f5f7f9;
      display: flex;
      align-items: center;
      span {
        margin: 0rem 0.1rem 0 0.2rem;
      }
      .el-input {
        flex: 1;
      }
      ::v-deep .el-input__inner {
        background: none !important;
        border: none !important;
      }
      ::v-deep .el-range-input {
        background: none !important;
      }
      ::v-deep .el-date-editor--datetimerange.el-input__inner {
        width: 3rem !important;
      }
    }
    .selectbox {
      width: 4rem;
      height: 0.42rem;
      background: #f5f7f9;
      display: flex;
      align-items: center;
      span {
        margin: 0rem 0.1rem 0 0.2rem;
      }
      .el-select {
        flex: 1;
      }
      ::v-deep .el-input__inner {
        background: none !important;
        border: none !important;
      }
    }
    .buttonbox {
      width: 2.3rem;
      height: 0.42rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.14rem;
      .reset {
        width: 1.04rem;
        height: 0.42rem;
        border-radius: 0.02rem;
        background: #f5f7f9;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #666666;
        span {
          margin-left: 0.04rem;
        }
      }
      .search {
        width: 1.04rem;
        height: 0.42rem;
        border-radius: 0.02rem;
        background: #e22a1f;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ffffff;
        span {
          margin-left: 0.04rem;
        }
      }
    }
  }
  .tablebox {
    margin: 0 auto 0 0.2rem;
    padding: 0.15rem 0.2rem;
    
    width: 96%;
    min-height: 5.88rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    border: 0.01rem solid #e8e8e8;
    border-top: none;
    .table {
      width: 100%;
      height: auto;
    }
    .pagination {
      width: 100%;
      height: 1rem;
      display: flex;
      justify-content: center;
      align-items: center;
      ::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
        background-color: #e22a1f !important;
      }
      ::v-deep .el-pager li {
        width: 0.4rem !important;
        height: 0.4rem !important;
        line-height: 0.4rem !important;
        border-radius: 0.04rem !important;
      }

      ::v-deep .el-pagination span {
        height: 0.4rem !important;
        line-height: 0.4rem !important;
      }
      ::v-deep .el-pagination button {
        width: 0.4rem !important;
        height: 0.4rem !important;
        line-height: 0.4rem !important;
        border-radius: 0.04rem !important;
      }
    }
  }
}
</style>
